$(function(){
  // 添加弹出层的索引
  let index=null
  // 编辑的弹出层索引
  let editIndex=null
    // 获取文章分类
   function initArtCase(){
    $.get('/my/article/cates',function(res){
        if(res.status==0){
          const htmlStr= template('temp',res)
          $('tbody').html(htmlStr)
        }
            })
   }
   
   initArtCase()


// 为添加按钮注册点击事件
$('#btnShowAdd').click(function(){
//    展示弹出层
 index=layer.open({
    // 标题
    title: '添加文章类别',
    // 指定弹出层类型
    type: 1,
    
    // 指定宽和高
    area:['500px','300px'],
    // 内容主体
    // 把指定的内容节点，读取为HTML字符串，赋值给content
    // 好处:html和js代码结构分离，还会有高亮提示

    content:$('#temp-form-add').html()
    
    
  });     
  
})

// 监听表单的submit表单
$('body').on('submit','#form-add',function(e){
  e.preventDefault()
// 发起请求，把数据传递给服务器
$.post('/my/article/addcates',$(this).serialize(),function(res){
 layer.msg(res.message)
  if(res.status===0){
// 关闭弹粗层
layer.close(index)
// 更新列表数据
initArtCase()
  }
})

})
// 为编辑按钮注册点击事件
$('body').on('click','#btn-edit',function(){
  // 展开弹框
  editIndex=layer.open({
    // 标题
    title: '修改文章类别',
    // 指定弹出层类型
    type: 1,
    
    // 指定宽和高
    area:['500px','300px'],
    // 内容主体
    // 把指定的内容节点，读取为HTML字符串，赋值给content
    // 好处:html和js代码结构分离，还会有高亮提示

    content:$('#temp-form-edit').html()
    
    
  }); 
  // 获取数据
  const id=$(this).attr('data-id')
  $.get('/my/article/cates/'+id,function(res){
    if(res.status==0){
      // 数据的回显
      layui.form.val('form-edit',res.data)
    }
  })
})
// 为编辑表单注册submit事件

$('body').on('submit','#form-edit',function(e){
 
  e.preventDefault()
// 发起请求，把数据传递给服务器
$.post('/my/article/updatecate',$(this).serialize(),function(res){
 layer.msg(res.message)
  if(res.status===0){
// 关闭弹粗层
layer.close(editIndex)
// 更新列表数据
initArtCase()
  }
})

})

// 删除功能步骤
// 1、为按钮删除注册点击事件
$('body').on('click','.btn-del',function(){
  // 获取删除按钮的ID
  const id=$(this).attr('data-id')
 
  // 询问是否删除
  layer.confirm('确定删除该条数据吗?', {icon: 3, title:'提示'}, function(index){
    //do something
  //  2、 确定删除后发起请求删除数据
  $.get('/my/article/deletecate/'+id,function(res){
    if(res.status===0){
// 3、更新数据
initArtCase()
    }
  })
    layer.close(index);
  });
 
 
})
})